<template>
  <div class="container">
<div class="factory-detail">
    <!-- 工厂基本信息卡片 -->
    <el-card class="info-card">
      <div class="factory-info">
        <div class="left">
          <el-avatar :size="100" :src="factoryInfo.logo" />
          <div class="certification">
            <el-tag type="success" v-if="factoryInfo.isVerified">
              <el-icon><Check /></el-icon>
              已认证
            </el-tag>
          </div>
        </div>
        
        <div class="right">
          <h2 class="name">{{ factoryInfo.name }}</h2>
          <div class="basic-info">
            <div class="info-item">
              <el-icon><Location /></el-icon>
              <span>{{ factoryInfo.address }}</span>
            </div>
            <div class="info-item">
              <el-icon><Phone /></el-icon>
              <span>{{ factoryInfo.phone }}</span>
            </div>
            <div class="info-item">
              <el-icon><Office /></el-icon>
              <span>成立时间：{{ factoryInfo.establishedTime }}</span>
            </div>
            <div class="info-item">
              <el-icon><User /></el-icon>
              <span>员工规模：{{ factoryInfo.employeeCount }}人</span>
            </div>
          </div>
          
          <div class="actions">
            <el-button type="primary" @click="handleContact">
              <el-icon><ChatDotRound /></el-icon>
              联系工厂
            </el-button>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 工厂详细信息 -->
    <el-tabs class="factory-tabs">
      <!-- 工厂介绍 -->
      <el-tab-pane label="工厂介绍">
        <div class="factory-intro">
          <h3>工厂简介</h3>
          <p>{{ factoryInfo.description }}</p>
          
          <h3>生产能力</h3>
          <el-descriptions :column="3" border>
            <el-descriptions-item label="月产能">
              {{ factoryInfo.monthlyCapacity }}件
            </el-descriptions-item>
            <el-descriptions-item label="最小起订量">
              {{ factoryInfo.minOrderQuantity }}件
            </el-descriptions-item>
            <el-descriptions-item label="样品打样时间">
              {{ factoryInfo.sampleTime }}天
            </el-descriptions-item>
          </el-descriptions>

          <h3>主营产品</h3>
          <el-tag 
            v-for="item in factoryInfo.mainProducts" 
            :key="item"
            class="product-tag"
          >
            {{ item }}
          </el-tag>
        </div>
      </el-tab-pane>

      <!-- 加工案例 -->
      <el-tab-pane label="加工案例">
        <div class="case-list">
          <el-row :gutter="20">
            <el-col 
              :xs="24" 
              :sm="12" 
              :md="8" 
              v-for="item in factoryInfo.cases" 
              :key="item.id"
            >
              <el-card class="case-card" shadow="hover">
                <el-carousel height="200px" indicator-position="outside">
                  <el-carousel-item v-for="img in item.images" :key="img">
                    <el-image :src="img" fit="cover" />
                  </el-carousel-item>
                </el-carousel>
                <div class="case-info">
                  <h4>{{ item.title }}</h4>
                  <p>{{ item.description }}</p>
                  <div class="case-meta">
                    <span>订单量：{{ item.orderQuantity }}件</span>
                    <span>生产周期：{{ item.productionTime }}天</span>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>

      <!-- 资质认证 -->
      <el-tab-pane label="资质认证">
        <div class="certification-list">
          <el-row :gutter="20">
            <el-col 
              :xs="24" 
              :sm="12" 
              :md="8" 
              v-for="cert in factoryInfo.certifications" 
              :key="cert.id"
            >
              <el-card class="cert-card">
                <el-image :src="cert.image" fit="cover" />
                <div class="cert-info">
                  <h4>{{ cert.name }}</h4>
                  <p>有效期至：{{ cert.validUntil }}</p>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>

      <!-- 评价信息 -->
      <el-tab-pane label="评价信息">
        <div class="review-list">
          <el-timeline>
            <el-timeline-item
              v-for="review in factoryInfo.reviews"
              :key="review.id"
              :timestamp="review.time"
            >
              <el-card class="review-card">
                <div class="review-header">
                  <el-avatar :src="review.userAvatar" size="small" />
                  <span class="username">{{ review.username }}</span>
                  <el-rate
                    v-model="review.rating"
                    disabled
                    show-score
                  />
                </div>
                <div class="review-content">
                  {{ review.content }}
                </div>
                <div class="review-images" v-if="review.images?.length">
                  <el-image
                    v-for="img in review.images"
                    :key="img"
                    :src="img"
                    :preview-src-list="review.images"
                  />
                </div>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
  </div>
  
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {Check,Location,Phone,User,ChatDotRound,Star} from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()

// 工厂信息
const factoryInfo = ref({})

// 获取工厂信息
const getFactoryInfo = async () => {
  try {
    // 调用API获取工厂信息
    const response = await fetch(`/api/factory/${route.params.id}`)
    factoryInfo.value = await response.json()
  } catch (error) {
    ElMessage.error('获取工厂信息失败')
  }
}

// 联系工厂
const handleContact = () => {
  router.push({
    path: '/chat',
    query: {
      targetId: factoryInfo.value.id,
      targetName: factoryInfo.value.name,
      targetType: 'factory'
    }
  })
}


onMounted(() => {
  getFactoryInfo()
})
</script>

<style lang="scss" scoped>
.factory-detail {
  padding: 20px;

  .info-card {
    margin-bottom: 20px;

    .factory-info {
      display: flex;
      gap: 20px;

      .left {
        text-align: center;
        
        .certification {
          margin-top: 10px;
        }
      }

      .right {
        flex: 1;

        .name {
          margin: 0 0 15px 0;
          font-size: 24px;
        }

        .basic-info {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 10px;
          margin-bottom: 20px;

          .info-item {
            display: flex;
            align-items: center;
            color: #666;

            .el-icon {
              margin-right: 8px;
            }
          }
        }
      }
    }
  }

  .factory-tabs {
    .factory-intro {
      h3 {
        margin: 20px 0 10px;
      }

      .product-tag {
        margin: 0 10px 10px 0;
      }
    }

    .case-card {
      margin-bottom: 20px;

      .case-info {
        padding: 15px;

        h4 {
          margin: 0 0 10px;
        }

        .case-meta {
          display: flex;
          justify-content: space-between;
          color: #666;
          font-size: 14px;
          margin-top: 10px;
        }
      }
    }

    .cert-card {
      margin-bottom: 20px;

      .cert-info {
        padding: 10px;
        text-align: center;
      }
    }

    .review-card {
      .review-header {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 10px;
      }

      .review-content {
        margin: 10px 0;
      }

      .review-images {
        display: flex;
        gap: 10px;
        margin-top: 10px;

        .el-image {
          width: 100px;
          height: 100px;
          border-radius: 4px;
        }
      }
    }
  }
}
</style>